<template>
  <div
    class="all"
    :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
  >
    <div class="logo_img">
      <img src="../../assets/images/logo.png" alt="" />
    </div>
    <div class="name">
      <div class="name1">账号</div>
      <input type="text" placeholder="手机号/系统号" v-model="admin" />
    </div>
    <div class="name">
      <div class="name1">密码</div>
      <input type="password" placeholder="请输入密码" v-model="password" />
    </div>
    <div class="txt">
      <van-checkbox class="checkbox" v-model="checked" shape="square"
        ><span style="color: #fff">记住密码</span></van-checkbox
      >
    </div>
    <van-button class="button" size="large" type="default" @click="degnlu"
      >登陆</van-button
    >
    <div class="bottomTxt">
      <span @click="possworTap">忘记密码了?</span>
      <span @click="registerTap">免费注册</span>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      checked: false,
      screenWidth: window.innerWidth,
      screenHeight: window.innerHeight,
      admin: "admin",
      password: "rbadmin",
    };
  },
  methods: {
    possworTap() {
      this.$router.push("/possword");
    },
    registerTap() {
      this.$router.push("/register");
    },
    degnlu() {
      if (this.admin != "admin") {
        Toast.fail("账号错误");
      } else if (this.password != "rbadmin") {
        Toast.fail("密码错误");
      } else {
        this.$router.push("/index");
      }
    },
  },
};
</script>
<style scoped>
.all {
  background: #4ac7d7;
}
input {
  border: none;
  background: none;
  color: white;
  font-size: 15px;
}
input::-webkit-input-placeholder {
  color: #fff;
}
.logo_img {
  width: 100%;
  padding-top: 35%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo_img img {
  width: 100px;
  border-radius: 22px;
}
.name {
  display: flex;
  align-items: center;
  margin-top: 15px;
  width: 90%;
  margin-left: 5%;
  padding: 10px 0;
  border-bottom: 1px solid #cfcfcf;
}
.name input {
  font-size: 18px;
  margin-left: 50px;
}
.name1 {
  font-size: 20px;
  color: #fff;
}
.checkbox {
  margin-top: 20px;
}
.button {
  margin-top: 20px;
  width: 90%;
  margin-left: 5%;
}
.txt {
  width: 90%;
  margin-left: 5%;
}
.checkbox {
  float: right;
}
.bottomTxt {
  display: flex;
  align-content: center;
  justify-content: space-between;
  position: fixed;
  bottom: 0px;
  left: 5%;
  width: 90%;
  height: 40px;
  color: #fff;
}
</style>